<template>
  <div class="myinfo box">
    <div class="myinfocontainer clmstart">
      <div
        class="backtoidxbox"
        @click="$router.replace({ path: '/index', query: { intxt: 'back' } })"
      >
        <img src="@/assets/img/toindex.png" />
      </div>
      <div class="myinfobox clmstart">
        <!-- title -->
        <img src="@/assets/img/person_title.png" class="person_title" />
        <img src="@/assets/img/person_head.png" class="person_head" />
        <!-- 内容 -->
        <div class="content" v-if="JSON.stringify(info) != '{}'">
          <div class="contentinfo">
            <div class="mitem nickname">
              <span class="ltxt">昵称：</span>
              <span class="lcont">{{ info.userInfo.username }}</span>
            </div>
            <div class="mitem mobile">
              <span class="ltxt">电话：</span>
              <span class="lcont">{{ info.userInfo.mobile }}</span>
            </div>
            <div class="mitem dakadi">
              <span class="ltxt">我的门店打卡地：</span>
              <p class="notips" v-if="info.checkInStoreSigns.length <= 0">
                暂无打卡信息
              </p>
              <div class="contshu" v-else>
                <div
                  class="addrname"
                  v-for="item in info.checkInStoreSigns"
                  :key="item.id"
                  @click="
                    $router.replace({
                      name: 'addrinfo',
                      params: { id: item.id },
                    })
                  "
                >
                  {{ item.name }}：{{ item.prize.title
                  }}<span>{{
                    item.prize.status == "1"
                      ? "(审核中)"
                      : item.prize.status == "-1"
                      ? "(审核失败)"
                      : ""
                  }}</span>
                </div>
              </div>
            </div>
            <div class="mitem dakadi">
              <span class="ltxt">我的景点打卡地：</span>
              <p class="notips" v-if="info.scenicSigns.length <= 0">
                暂无打卡信息
              </p>
              <div class="contshu" v-else>
                <div
                  class="addrname"
                  v-for="item in info.scenicSigns"
                  :key="item.id"
                  @click="
                    $router.replace({
                      name: 'scenicinfo',
                      params: { id: item.id },
                    })
                  "
                >
                  {{ item.name }}：{{ item.prize.title
                  }}<span>
                    {{
                      item.prize.status == "1"
                        ? "(审核中)"
                        : item.prize.status == "-1"
                        ? "(审核失败)"
                        : ""
                    }}</span
                  >
                </div>
              </div>
            </div>
            <div class="mitem myjifen">
              <span class="ltxt">我的积分：</span>
              <span class="ljifen">{{ info.totalPoints }}</span>
              <div class="contheng">
                <div class="hitem">注册：{{ info.points.points_by_reg }}分</div>
                <div class="hitem">
                  邀请好友注册：{{ info.points.points_by_invite }}分
                </div>
                <div class="hitem">
                  答题：{{ info.points.points_by_answer }}分
                </div>
                <div class="hitem">
                  抽奖：{{ info.points.points_by_prize }}分
                </div>
                <div class="hitem">
                  景点打卡：{{ info.points.points_by_sign }}分
                </div>
              </div>
              <p class="jftips">
                *积分兑换有效期为2024年5月7日0点-2024年9月30日24点，过期则积分清零
              </p>
            </div>
            <!-- 底部按钮区 -->
            <div class="mitem mbtnbox">
              <div class="mbtnbox cjbtnbox" @click="$router.replace('/order')">
                <img src="@/assets/img/btn_order.png" />
              </div>
              <div class="mbtnbox tostorebtn" @click="toStore">
                <img src="@/assets/img/btn_store.png" />
              </div>
            </div>
          </div>
        </div>
        <img src="@/assets/img/person_foot.png" class="person_foot" />
      </div>
      <!-- 丹尼斯广告 -->
      <img
        src="https://mahelei.oss-cn-beijing.aliyuncs.com/2024/Advance318/imgs/dainese.jpg"
        class="dainese"
        @click="openDaineseWxapp"
      />
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      info: {
        userInfo: {},
        checkInStoreSigns: [], // 门店打卡
        scenicSigns: [], // 景点打卡
        totalPoints: "0",
        points: {
          points_by_reg: "0",
          points_by_invite: "0",
          points_by_answer: "0",
          points_by_prize: "0",
          points_by_sign: "0",
        },
        prizeInfo: [],
      }, //用户信息
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    //获取个人信息
    getUserInfo() {
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      this.$http.post("/getUserCenterInfo").then((dat) => {
        Toast.clear();
        if (dat.data.code == 200) {
          //获取成功
          let info = dat.data.data;
          this.info = info;
        } else {
          Toast(dat.data.msg);
        }
      });
    },
    // 跳转小程序
    openDaineseWxapp() {
      wx.miniProgram.navigateTo({
        url: `/pages/openwxapp/openwxapp`,
      });
    },
    // 商城
    toStore() {
      this.$router.replace("/store");
      // Toast("系统维护中...");
    },
  },
};
</script>
<style lang="less" scoped>
.myinfo {
  overflow-y: scroll;
  .myinfocontainer {
    width: 100%;
    min-height: 100%;
    height: auto;
    background: url("@/assets/img/bg2.jpg") no-repeat;
    background-size: 100% 100%;
    .myinfobox {
      position: relative;
      height: auto;
      margin-top: 4rem;
      .person_title {
        position: absolute;
        top: 0;
        margin-left: 3px;
      }
      .person_head,
      .person_foot {
        position: relative;
        width: 100%;
        vertical-align: middle;
      }
      .person_head {
        margin-top: 6rem;
      }
      .person_foot {
        margin-top: -1px;
      }
      // 内容区
      .content {
        position: relative;
        z-index: 2;
        width: 678px;
        height: auto;
        margin-top: -1px;
        // background: #e9e8eb url("@/assets/img/squre.png") repeat;
        // background-size: 88px;
        background-color: #e9e8eb;
        border: 10px solid #e6111c;
        box-sizing: border-box;
        border-top-style: none;
        border-bottom-style: none;
        .contentinfo {
          width: 88%;
          margin: 0 auto;
          padding: 2rem 0;
          .mitem {
            span {
              font-size: 2rem;
            }
            .notips {
              font-size: 1.8rem;
              color: #7f7f7f;
              padding: 1rem 0;
            }
            .ltxt {
              font-family: "AlibabaPuHuiTi-2-85-Bold";
              letter-spacing: 2px;
            }
            .contshu {
              margin: 1rem 0;
              div {
                margin-bottom: 0.8rem;
                span {
                  font-size: 1.2rem;
                  padding-left: 0.3rem;
                }
              }
            }
            button {
              font-size: 1.8rem;
              padding: 1.5rem;
              background: #e6111c;
              color: #ffffff;
              border-style: none;
              border-radius: 0.5rem;
              letter-spacing: 2px;
            }
            .mbtnbox {
              width: 273px;
              height: 76px;
              overflow: hidden;
              img {
                width: 100%;
              }
            }
          }
          .dakadi {
            margin-top: 3rem;
            .contshu {
              display: flex;
              flex-flow: column nowrap;
              justify-content: flex-start;
              align-items: flex-start;
              div {
                font-size: 1.5rem;
                color: #ffffff;
                padding: 0.5rem 1.5rem;
                background-color: #e6111c;
                border-radius: 2rem;
              }
            }
          }
          .myjifen {
            width: 100%;
            margin-top: 2rem;
            margin-left: -1rem;
            background: rgba(166, 166, 166, 0.3);
            padding: 0 1rem;
            .ljifen {
              font-size: 3rem;
              color: #e6111c;
              font-family: "AlibabaPuHuiTi-2-85-Bold";
              line-height: 70px;
            }
            .contheng {
              width: 100%;
              margin-top: 1rem;
              display: flex;
              flex-flow: row wrap;
              .hitem {
                width: 50%;
                font-size: 1.8rem;
                margin-bottom: 0.5rem;
              }
              .jifen {
                position: relative;
                width: 263px;
                height: 98px;
                img {
                  width: 100%;
                }
                div {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 86px;
                  height: 86px;
                  font-size: 2.3rem;
                  text-align: center;
                  line-height: 86px;
                  color: #ffffff;
                  font-family: "AlibabaPuHuiTi-2-85-Bold";
                }
                .gray {
                  opacity: 0.6;
                }
              }
            }
            .jftips {
              font-size: 1.35rem;
              padding: 0.5rem 0 1rem;
              line-height: 1.3;
            }
          }
          .myprice {
            margin-top: 2rem;
            .contshu {
              margin: 1.5rem 0;
              .jpinfo {
                font-size: 1.8rem;
                .jdstyle {
                  font-size: 1.8rem;
                }
              }
            }
            .jptips {
              font-size: 1.4rem;
              color: #7f7f7f;
              margin-bottom: 2rem;
            }
          }
          // 底部按钮区
          .mbtnbox {
            margin-top: 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }
    .dainese {
      margin: 3rem auto 4rem;
    }
  }
}
</style>
<style>
.van-picker__cancel,
.van-picker__confirm,
.van-picker__title,
.van-picker-column {
  font-size: 2rem !important;
}
.van-picker__title {
  line-height: 36px !important;
}
.van-picker__toolbar {
  height: 70px !important;
}
.van-calendar__header-title {
  height: 75px !important;
  line-height: 75px !important;
}
.van-calendar__month-title {
  line-height: 75px !important;
  margin-top: 2rem !important;
}
.van-calendar__header-title,
.van-calendar__header-subtitle,
.van-calendar__month-title,
.van-calendar__confirm {
  font-size: 2rem !important;
}
.van-calendar__weekdays {
  height: 90px !important;
}
.van-calendar__weekday {
  line-height: 90px !important;
  font-size: 1.7rem !important;
}
.van-calendar__day {
  font-size: 1.7rem !important;
}
.van-calendar__confirm {
  height: 70px !important;
}
</style>
